/**
  其他境外交流项目管理-查看
*/
<template>
  <div class="project-application-container">
    <div class="personal-info-container">
      <!-- 个人信息开始 -->
      <div class="privacy-title title">{{ $t('projectApplication.personalInfo') }}</div>
      <el-form :model="applyInfo" ref="applyInfo" class="apply-info">
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 年级 -->
            <el-form-item
              :label="$t('projectApplication.grade') + '：'"
              prop="studentGrade">
              <el-input disabled v-model="applyInfo.studentGrade"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 学院 -->
            <el-form-item
              :label="$t('externamExchangeBase.college') + '：'"
              prop="studentFacultyName">
              <el-input disabled v-model="applyInfo.studentFacultyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 姓名 -->
            <el-form-item
              :label="$t('externamExchangeBase.studentName') + '：'"
              prop="studentName">
              <el-input disabled v-model="applyInfo.studentName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 学号 -->
            <el-form-item
              :label="$t('externamExchangeBase.studentId') + '：'"
              prop="studentId">
              <el-input disabled v-model="applyInfo.studentId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 专业 -->
            <el-form-item
              :label="$t('externamExchangeBase.profession') + '：'"
              prop="studentProfessionName">
              <el-input disabled v-model="applyInfo.studentProfessionName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 学习形式 -->
            <el-form-item
              :label="$t('projectApplication.studentFormLearning') + '：'"
              prop="studentFormLearning">
              <el-input disabled v-model="applyInfo.studentFormLearning"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 在校状态 -->
            <el-form-item
              :label="$t('projectApplication.studentLeaveSchool') + '：'"
              prop="studentLeaveSchool">
              <el-input disabled v-model="applyInfo.studentLeaveSchool"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 负责导师 -->
            <el-form-item
              :label="$t('projectApplication.studentTeacherName') + '：'"
              prop="studentTeacherName">
              <el-input disabled v-model="applyInfo.studentTeacherName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 培养层次 -->
            <el-form-item
              :label="$t('projectApplication.studentTrainingLevel') + '：'"
              prop="studentTrainingLevel">
              <el-input disabled v-model="applyInfo.studentTrainingLevel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <!-- 培养类别 -->
              <el-form-item
                :label="$t('externamExchangeBase.cultivationCategory') + '：'"
                prop="studentTrainingCategory">
                <el-input disabled v-model="applyInfo.studentTrainingCategory"></el-input>
              </el-form-item>
            </el-col>
          <el-col :span="6">
            <!-- 预计毕业时间 -->
            <el-form-item
              :label="$t('projectApplication.studentExpectedGraduationDate') + '：'"
              prop="studentExpectedGraduationDate">
              <el-input disabled v-model="applyInfo.studentExpectedGraduationDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 是否存在不及格课程 -->
            <el-form-item
              :label="$t('projectApplication.studentExistFailed') + '：'"
              prop="studentExistFailed">
              <el-input disabled v-model="applyInfo.studentExistFailed"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 博士论文是否开题 -->
            <el-form-item
              :label="$t('projectApplication.studentThesisOpened') + '：'"
              prop="studentThesisOpened">
              <el-input disabled v-model="applyInfo.studentThesisOpened"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 录取类别 -->
            <el-form-item
              :label="$t('projectApplication.studentEnrolCategory') + '：'"
              prop="studentEnrolCategory">
              <el-input disabled v-model="applyInfo.studentEnrolCategory"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 手机号码 -->
            <el-form-item
              :label="$t('projectApplication.studentPhone') + '：'"
              prop="studentPhone"
              :rules="[{ required: true, message: $t('projectApplication.requireStudentPhone'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.studentPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 电子邮件地址 -->
            <el-form-item
              :label="$t('projectApplication.studentEmail') + '：'"
              prop="studentEmail"
              :rules="[{ required: true, message: $t('projectApplication.requireStudentEmail'), trigger: 'blur'}]">
               <el-tooltip
                   class="item"
                   effect="light"
                   :content="applyInfo.studentEmail"
                   placement="top"
               >
                <el-input
                   v-model="applyInfo.studentEmail"
                   class="topic-input-select"
                   maxlength="320"
                   disabled
                   ></el-input>
                 </el-tooltip>
              <!-- <el-input disabled v-model="applyInfo.studentEmail"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 是否申请过对外交流项目 -->
            <el-form-item
              :label="$t('projectApplication.studentOnceApproved') + '：'"
              prop="studentOnceApproved">
              <el-input disabled v-model="applyInfo.studentOnceApproved"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" v-if="applyInfo.studentOnceApproved === '是'">
            <!-- 对外交流项目类别 -->
            <el-form-item
              :label="$t('projectApplication.studentOnceApprovedNames') + '：'"
              prop="studentOnceApprovedNames">
              <el-input disabled v-model="applyInfo.studentOnceApprovedNames"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 个人信息结束 -->
        <!-- 申请项目情况开始 -->
        <div class="privacy-title title other-title">{{ $t('projectApplication.applyProjectStatus') }}</div>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 项目子类别 -->
            <el-form-item
              :label="$t('projectManage.projectSubCategory') + '：'"
              prop="projectSubCategoryName"
              :rules="[{ required: true, message: $t('projectManage.requireProjectSubCategory'), trigger: 'change'}]">
              <el-input disabled v-model="applyInfo.projectSubCategoryName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <!-- 项目名称 -->
            <el-form-item
              :label="$t('projectManage.projectName') + '：'"
              prop="projectMngmtName"
              :rules="[{ required: true, message: $t('projectManage.requireProjectName'), trigger: 'change'}]">
              <el-input disabled v-model="applyInfo.projectMngmtName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 拟留学国别/地区 -->
            <el-form-item
              :label="$t('projectApplication.projectNationCode') + '：'"
              prop="projectNationName"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectNationCode'), trigger: 'change'}]">
              <el-input disabled v-model="applyInfo.projectNationName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <!-- 拟留学学校 -->
            <el-form-item
              :label="$t('projectApplication.projectCollegeId') + '：'"
              prop="projectCollegeCn"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectCollegeId'), trigger: 'change'}]">
              <el-input disabled v-model="applyInfo.projectCollegeCn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 拟留学学校英文名称 -->
            <el-form-item
              :label="$t('projectApplication.projectCollegeEn') + '：'"
              prop="projectCollegeEn"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectCollegeEn'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.projectCollegeEn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <!-- 拟留学专业名称（一级学科名称） -->
            <el-form-item
              :label="$t('projectApplication.projectOverseasSpecialitie') + '：'"
              prop="projectOverseasSpecialitie"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectOverseasSpecialitie'), trigger: 'change'}]">
              <el-select disabled v-model="applyInfo.projectOverseasSpecialitie" style="width: 100%;">
                <el-option
                  v-for="item in options.projectOverseasSpecialitie"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 具体留学研究方向 -->
            <el-form-item
              :label="$t('projectApplication.projectResearchDirection') + '：'"
              prop="projectResearchDirection"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectResearchDirection'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.projectResearchDirection"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 计划留学开始时间 -->
            <el-form-item
              :label="$t('projectApplication.studyAbroadStartTime') + '：'"
              prop="projectStartTime"
              :rules="[{ required: true, message: $t('projectApplication.requireStudyAbroadStartTime'), trigger: 'change'}]">
              <el-date-picker
                style="width: 100%"
                v-model="applyInfo.projectStartTime"
                disabled
                type="date"
                value-format="yyyy-MM-dd"
                :placeholder="$t('graduateBase.chooseDateAndTime')"
                :picker-options="jhlxkssjPickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 计划留学结束时间 -->
            <el-form-item
              :label="$t('projectApplication.studyAbroadEndTime') + '：'"
              prop="projectEndTime"
              :rules="[{ required: true, message: $t('projectApplication.requireStudyAbroadEndTime'), trigger: 'change'}]">
              <el-date-picker
                style="width: 100%"
                v-model="applyInfo.projectEndTime"
                disabled
                type="date"
                value-format="yyyy-MM-dd"
                :placeholder="$t('graduateBase.chooseDateAndTime')"
                :picker-options="jhlxjssjPickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 申请留学期限 -->
            <el-form-item
              :label="$t('projectApplication.projectStudyPeriod') + '：'"
              prop="projectStudyPeriod"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectStudyPeriod'), trigger: 'blur' },{ validator: checkSpecial, trigger: 'blur' },{ validator: checkPositiveInteger, trigger: 'blur'} ]">
              <el-input disabled v-model="applyInfo.projectStudyPeriod" :maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 申请资助期限 -->
            <el-form-item
              :label="$t('projectApplication.projectFundingPeriod') + '：'"
              prop="projectFundingPeriod"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectFundingPeriod'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur' },{ validator: checkPositiveInteger, trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.projectFundingPeriod" :maxlength="9"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <!-- 留学内容 -->
            <el-form-item
              :label="$t('projectApplication.projectStudyAbroadContent') + '：'"
              prop="projectStudyAbroadContent"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectStudyAbroadContent'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.projectStudyAbroadContent"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="applyInfo.projectSubCategory === 6">
            <!-- 是否申请学费资助（仅国家公派于填写） -->
            <el-form-item
              :label="$t('projectApplication.projectFundingTuition') + '：'"
              prop="projectFundingTuition">
                <div style="display: inline-block;width: 100%;">
                  <el-radio disabled v-model="applyInfo.projectFundingTuition" label="1">{{ $t('externamExchangeBase.yes') }}</el-radio>
                  <el-radio disabled v-model="applyInfo.projectFundingTuition" label="0">{{ $t('externamExchangeBase.no') }}</el-radio>
                </div>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-else>
            <!-- 拟留学院校QS排名其他排名备注 -->
            <el-form-item
              :label="$t('projectApplication.projectQsRanking') + '：'"
              prop="projectQsRanking"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectQsRanking'), trigger: 'blur'}]">
                <el-input disabled v-model="applyInfo.projectQsRanking"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="applyInfo.projectSubCategory === 6">
          <el-col :span="6" v-if="applyInfo.projectFundingTuition === '1'">
            <!-- 学费金额（请填写币种及金额） -->
            <el-form-item
              :label="$t('projectApplication.projectTuitionAmount') + '：'"
              prop="projectTuitionAmount"
              :rules="validateProjectTuitionAmount">
              <el-input disabled v-model="applyInfo.projectTuitionAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 拟留学院校QS排名其他排名备注 -->
            <el-form-item
              :label="$t('projectApplication.projectQsRanking') + '：'"
              prop="projectQsRanking"
              :rules="[{ required: true, message: $t('projectApplication.requireProjectQsRanking'), trigger: 'blur'}]">
                <el-input disabled v-model="applyInfo.projectQsRanking"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 申请项目情况结束 -->
        <!-- 学生外语水平开始 -->
        <div class="privacy-title title other-title">{{ $t('projectApplication.studentForeignLevel') }}<span style="color: #d9001b;font-size: 15px;">{{ $t('projectApplication.studentForeignLevelDemo') }}</span></div>
        <el-row :gutter="24">
          <el-col :span="8">
            <!-- 学费金额（请填写币种及金额） -->
            <el-form-item
              :label="$t('projectApplication.foreignLanguageGrade') + '：'"
              prop="languageOtherLevel"
              :rules="[{ required: true, message: $t('projectApplication.requireForeignLanguageGrade'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.languageOtherLevel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 学生外语水平结束 -->
        <!-- 外方导师开始 -->
        <div class="privacy-title title other-title">{{ $t('projectApplication.foreignTutor') }}</div>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- 外方导师姓名 -->
            <el-form-item
              :label="$t('projectApplication.teacherName') + '：'"
              prop="teacherName"
              :rules="[{ required: true, message: $t('projectApplication.requireTeacherName'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.teacherName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 专业技术职称 -->
            <el-form-item
              :label="$t('projectApplication.teacherPositional') + '：'"
              prop="teacherPositional"
              :rules="[{ required: true, message: $t('projectApplication.requireTeacherPositional'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.teacherPositional"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 职务 -->
            <el-form-item
              :label="$t('projectApplication.teacherJob') + '：'"
              prop="teacherJob"
              :rules="[{ required: true, message: $t('projectApplication.requireTeacherJob'), trigger: 'blur'}]">
              <el-input disabled v-model="applyInfo.teacherJob"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 外方导师电子邮箱 -->
            <el-form-item
              :label="$t('projectApplication.teacherEmail') + '：'"
              prop="teacherEmail"
              :rules="[{ required: true, message: $t('projectApplication.requireTeacherEmail'), trigger: 'blur'}]">
               <el-tooltip
                   class="item"
                   effect="light"
                   :content="applyInfo.teacherEmail"
                   placement="top"
               >
                <el-input
                   v-model="applyInfo.teacherEmail"
                   class="topic-input-select"
                   maxlength="320"
                   disabled
                   ></el-input>
                </el-tooltip>
              <!-- <el-input disabled v-model="applyInfo.teacherEmail"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 外方导师结束 -->
        <!-- 合作项目开始 -->
        <div class="privacy-title title other-title">{{ $t('projectApplication.researchProject') }}</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <!-- 双方导师是否有合作科研项目 -->
            <el-form-item
              :label="$t('projectApplication.cooperateBoth') + '：'"
              prop="cooperateBoth">
                <el-radio disabled v-model="applyInfo.cooperateBoth" label="1">{{ $t('externamExchangeBase.yes') }}</el-radio>
                <el-radio disabled v-model="applyInfo.cooperateBoth" label="0">{{ $t('externamExchangeBase.no') }}</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="applyInfo.cooperateBoth === '1' || applyInfo.cooperateBoth === ''">
          <el-col :span="12">
            <!-- 合作项目名称 -->
            <el-form-item
              :label="$t('projectApplication.cooperateName') + '：'"
              prop="cooperateName"
              :rules="validateCooperateNameArr">
                <el-input disabled v-model="applyInfo.cooperateName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 合作开始时间 -->
            <el-form-item
              :label="$t('projectApplication.cooperateStartTime') + '：'"
              prop="cooperateStartTime"
              :rules="validateStartTimeArr">
                <el-date-picker
                  style="width: 100%"
                  v-model="applyInfo.cooperateStartTime"
                  disabled
                  type="date"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 合作结束时间 -->
            <el-form-item
              :label="$t('projectApplication.cooperateEndTime') + '：'"
              prop="cooperateEndTime"
              :rules="validateEndTimeArr">
                <el-date-picker
                  style="width: 100%"
                  v-model="applyInfo.cooperateEndTime"
                  disabled
                  type="date"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 合作项目结束 -->
        <!-- 其他参与的交流项目开始 -->
        <div class="privacy-title title other-title">{{ $t('projectApplication.otherResearchProject') }}</div>
        <el-row :gutter="24">
          <el-col :span="24">
            <!-- 在同济期间，参与其他国家或港澳台地区交流项目的情况介绍：（最大字数不超过 500 字） -->
            <el-form-item
              :label="$t('projectApplication.participantCommunication') + '：'"
              prop="participantCommunication">
                <el-input disabled type="textarea" :rows="7" v-model="applyInfo.participantCommunication"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 其他参与的交流项目结束 -->
        <!-- 附件管理开始 -->
        <div class="privacy-title title other-title">
          <span>{{ $t('externamExchangeBase.fileManage') }}</span>
          <!-- 学习(研修)计划模板 -->
          <!-- <el-button style="margin-left: 30px;" type="text" size="medium" @click="downloadStudyAndTrainPlan()">{{ $t('projectApplication.studyAndTrainPlan') }}</el-button> -->
          <!-- 申请人科研成果清单模板 -->
          <!-- <el-button type="text" size="medium" @click="downloadApplicateResearchResults()">{{ $t('projectApplication.applicateResearchResults') }}</el-button> -->
        </div>
        <el-divider></el-divider>
        <!-- <div style="margin-left: 20px;color: #8896a7;font-size: 12px;">{{ $t('externamExchangeBase.fileName') }}</div>
        <el-divider></el-divider> -->
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 国外院校正式邀请函或接收函 -->
            <el-form-item
              :label="$t('projectApplication.foreignInstitutionLetter')"
              prop="foreignInstitutionLetter"
              label-width="220px"
              style="margin: 12px 0;"
              :rules="[{ required: true, message: $t('projectApplication.requireForeignInstitutionLetter'), trigger: 'change'}]">
                <el-upload
                  v-model="applyInfo.foreignInstitutionLetter"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 111, 'foreignInstitutionLetter')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 111)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.foreignInstitutionLetterTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 学习(研修)计划 -->
            <el-form-item
              :label="$t('projectApplication.studyPlan')"
              prop="studyPlan"
              label-width="220px"
              style="margin: 12px 0;"
              :rules="[{ required: true, message: $t('projectApplication.requireStudyPlan'), trigger: 'change'}]">
                <el-upload
                  v-model="applyInfo.studyPlan"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 112, 'studyPlan')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 112)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.studyPlanTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 国外导师签字的简历 -->
            <el-form-item
              :label="$t('projectApplication.resumeSignedForForeignTutor')"
              prop="resumeSignedForForeignTutor"
              label-width="220px"
              style="margin: 12px 0;"
              :rules="[{ required: true, message: $t('projectApplication.requireResumeSignedForForeignTutor'), trigger: 'change'}]">
                <el-upload
                  v-model="applyInfo.resumeSignedForForeignTutor"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 113, 'resumeSignedForForeignTutor')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 113)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.resumeSignedForForeignTutorTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 外语证明 -->
            <el-form-item
              :label="$t('projectApplication.foreignLanguageCertificate')"
              prop="foreignLanguageCertificate"
              label-width="220px"
              style="margin: 12px 0;"
              :rules="[{ required: true, message: $t('projectApplication.requireForeignLanguageCertificate'), trigger: 'change'}]">
                <el-upload
                  v-model="applyInfo.foreignLanguageCertificate"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 114, 'foreignLanguageCertificate')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 114)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.foreignLanguageCertificateTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 申请人科研成果清单 -->
            <el-form-item
              :label="$t('projectApplication.scientificResearchAchievements')"
              prop="scientificResearchAchievements"
              label-width="220px"
              style="margin: 12px 0;"
              :rules="[{ required: true, message: $t('projectApplication.requireScientificResearchAchieve'), trigger: 'change'}]">
                <el-upload
                  v-model="applyInfo.scientificResearchAchievements"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 115, 'scientificResearchAchievements')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 115)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.scientificResearchAchievementsTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 申请人科研成果证明材料 -->
            <el-form-item
              :label="$t('projectApplication.researchAchieveCertificate')"
              prop="researchAchieveCertificate"
              style="margin: 12px 0;"
              label-width="220px">
                <el-upload
                  v-model="applyInfo.researchAchieveCertificate"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 116, 'researchAchieveCertificate')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 116)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.researchAchieveCertificateTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="24" class="file-container">
          <el-col :span="24">
            <!-- 其他附件 -->
            <el-form-item
              :label="$t('projectApplication.otherFile')"
              prop="otherFile"
              style="margin: 12px 0;"
              label-width="220px">
                <el-upload
                  v-model="applyInfo.otherFile"
                  disabled
                  class="upload-demo"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-preview="(file) => downloadMaterial(file, 117, 'otherFile')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="getFileList(applyInfo.files, 117)">
                </el-upload>
                <span class="file-tip-info">{{ $t('projectApplication.otherFileTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <!-- 附件管理结束 -->
        <!-- 出国及经费历史信息开始 -->
        <div class="privacy-title title other-title" style="margin-top: 40px;">
          {{ $t('projectApplication.historyInfo') }}
          <!-- <span v-if="applyInfo.studentTrainingLevel === '硕士'">{{ $t('projectApplication.graduateStu') }}</span>
          <span v-else-if="applyInfo.studentTrainingLevel === '博士'">{{ $t('projectApplication.historyOfPhD') }}</span> -->
        </div>
        <edu-table :order="false" :pagination="false" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="historyData" size="mini">
          <edu-table-column :label="$t('projectApplication.destinationCountry')" prop="destinationCountry"></edu-table-column>
          <!-- <edu-table-column v-if="applyInfo.studentTrainingLevel === '博士'" :label="$t('projectApplication.thesisOpened')" prop="thesisOpened"></edu-table-column> -->
          <edu-table-column :label="$t('projectApplication.inviteAgency')" prop="inviteAgency"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.planStartTime')" prop="planStartTime"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.planEndTime')" prop="planEndTime"></edu-table-column>
          <!-- <edu-table-column :label="$t('projectApplication.realStartTime')" prop="realStartTime"></edu-table-column> -->
          <edu-table-column :label="$t('projectApplication.realEndTime')" prop="realEndTime"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.backStatus')" prop="backStatus"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.grantingAgency')" prop="grantingAgency"></edu-table-column>
          <edu-table-column :label="$t('externamExchangeBase.auditStatus')" prop="auditStatus">
            <!-- <template slot-scope="scope">
              {{ scope.row.auditStatus | auditStatus}}
            </template> -->
          </edu-table-column>
        </edu-table>
        <!-- 出国及经费历史信息结束 -->
        <!-- 异动信息开始 -->
        <div class="privacy-title title other-title" style="margin-top: 40px;" v-if="applyInfo.projectSubCategory === 6">
          {{ $t('externamExchangeBase.changeInfo') }}
        </div>
        <edu-table v-if="applyInfo.projectSubCategory === 6" :order="false" :pagination="false" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="changeData" size="mini">
          <edu-table-column :label="$t('exchangeProjectAudit.projectNationCode')" prop="countryRegion"></edu-table-column>
          <edu-table-column :label="$t('externamExchangeBase.cooperativeUniversity')" prop="cooperateUniversity"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.projectStartTime')" prop="projectStartTime"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.projectEndTime')" prop="projectEndTime"></edu-table-column>
          <edu-table-column :label="$t('projectApplication.projectFundingPeriod')" prop="projectFundingPeriod"></edu-table-column>
          <edu-table-column :label="$t('externamExchangeBase.changeTime')" prop="createTime"></edu-table-column>
        </edu-table>
        <!-- 异动信息结束 -->
        <slot></slot>
        <slot name="footer">
          <!-- 审批进度开始 -->
          <div class="privacy-title title other-title" style="margin-top: 40px;">
            {{ $t('exchangeProjectAudit.auditProgress') }}
          </div>
          <edu-table :pagination="false" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="approvalProgressData" size="mini">
            <edu-table-column :label="$t('exchangeProjectAudit.time')" prop="time">
              <template slot-scope="scope">
                {{ scope.row.time | time }}
              </template>
            </edu-table-column>
            <edu-table-column :label="$t('exchangeProjectAudit.character')" prop="role"></edu-table-column>
            <edu-table-column :label="$t('exchangeProjectAudit.approvalDepartment')" prop="approvorName"></edu-table-column>
            <edu-table-column :label="$t('exchangeProjectAudit.approvalResults')" prop="result">
              <template slot-scope="scope">
                {{ scope.row.result | result}}
              </template>
            </edu-table-column>
            <edu-table-column :label="$t('exchangeProjectAudit.approvalInstructions')" prop="content"></edu-table-column>
          </edu-table>
          <!-- 审批进度结束 -->
        </slot>
      </el-form>
    </div>
  </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { downloadfile } from "common/src/api/upload";
import externalExchangeApi from 'common/src/api/externalExchange/externalExchange';
import * as INDEX from 'common/src/utils/index';
export default {
  components: {
  },
  data() {
    return {
      uploadConfig: {
        data: { bucketname: 'face', folderpath: 'file' },
      },
      fileFlag: true,
      fileInfo: [
        {
          number: 111,
          fileId: '',
          fileName: ''
        },
        {
          number: 112,
          fileId: '',
          fileName: ''
        },
        {
          number: 113,
          fileId: '',
          fileName: ''
        },
        {
          number: 114,
          fileId: '',
          fileName: ''
        },
        {
          number: 115,
          fileId: '',
          fileName: ''
        },
        {
          number: 116,
          fileId: '',
          fileName: ''
        },
        {
          number: 117,
          fileId: '',
          fileName: ''
        },
      ],
      applyInfo: {
        // 个人信息开始
        studentGrade: '',
        studentFacultyName: '',
        studentName: '',
        studentId: '',
        studentProfessionName: '',
        studentFormLearning: '',
        studentLeaveSchool: '',
        studentTeacherName: '',
        studentTrainingLevel: '',
        studentTrainingCategory: '',
        studentExpectedGraduationDate: '',
        studentExistFailed: '',
        studentThesisOpened: '',
        studentEnrolCategory: '',
        studentOnceApproved: '',
        studentOnceApprovedNames: '',
        studentPhone: '',
        studentEmail: '',
        // 个人信息结束
        // 申请项目情况开始
        projectSubCategory: '',
        projectMngmtId: '',
        projectNationCode: '',
        projectCollegeId: '',
        projectCollegeEn: '',
        projectOverseasSpecialitie: '',
        projectResearchDirection: '',
        projectStartTime: '',
        projectEndTime: '',
        projectStudyPeriod: '',
        projectFundingPeriod: '',
        projectStudyAbroadContent: '',
        projectFundingTuition: '0',
        requireProjectTuitionAmount: '',
        projectQsRanking: '',
        // 申请项目情况结束
        // 外语成绩开始
        languageOtherLevel: '',
        // 外语成绩结束
        // 外方导师开始
        teacherName: '',
        teacherPositional: '',
        teacherJob: '',
        teacherEmail: '',
        // 外方导师结束
        // 合作项目开始
        cooperateBoth: '',
        cooperateName: '',
        cooperateStartTime: '',
        cooperateEndTime: '',
        participantCommunication: '',
        // 合作项目结束
        // 其他参与的交流项目开始
        participantCommunication: '',
        // 其他参与的交流项目结束
        // 附件管理开始
        foreignInstitutionLetter: '',
        studyPlan: '',
        resumeSignedForForeignTutor: '',
        foreignLanguageCertificate: '',
        scientificResearchAchievements: '',
        researchAchieveCertificate: '',
        otherFile: '',
        files: []
        // 附件管理结束
      },
      validateProjectTuitionAmount: [],
      options: {
        // 项目子类别
        projectSubCategory: [],
        // 项目名称
        projectMngmtId: [],
        // 拟留学国别/地区
        projectNationCode: [],
        // 拟留学学校
        projectCollegeId: [],
        // 拟留学专业名称（一级学科名称）
        projectOverseasSpecialitie: []
      },
      historyData: [],
      approvalProgressData: [],
      changeData: [],
      validateCooperateNameArr: [],
      validateStartTimeArr: [],
      validateEndTimeArr: []
    };
  },
  props: {
    applyId: {
      type: String,
      default: ''
    },
    projectStartTime: {
      type: String,
      default: ''
    },
    projectEndTime: {
      type: String,
      default: ''
    }
  },
  filters: {
    result(val) {
      switch(val) {
        case 'COMMIT':
          return '提交'
        case 'Process':
          return '通过'
        case 'Reject':
          return '已驳回'
        case 'Recall':
          return '撤回'
        case 'End':
          return '通过'
        case 'approveNoPass':
          return '未通过'
        default:
          return val
      }
    },
    time(time) {
      return INDEX.parseTime(time, '{y}-{m}-{d}')
    }
  },
  computed: {

  },
  created() {
  },
  async mounted() {
    await this.initOptions()
    const response = await externalExchangeApi.getProjectApplicationDetail({
      applyId: this.applyId
    })
    if (response.code === 200) {
      this.applyInfo = response.data
      // 获取出国及经费历史信息
      this.historyData = response.data.histories ? response.data.histories : []
      // 获取审批进度记录
      this.approvalProgressData = response.data.processes ? response.data.processes : []
      // 异动信息
      this.changeData = response.data.changes ? response.data.changes : []
      this.applyInfo.studentExistFailed = response.data.studentExistFailed ? '是' : '否'
      this.applyInfo.studentOnceApproved = response.data.studentOnceApproved ? '是' : '否'
      this.applyInfo.studentOnceApprovedNames = response.data.studentOnceApprovedNames ? response.data.studentOnceApprovedNames : ''
      this.applyInfo.studentThesisOpened = this.applyInfo.studentThesisOpened === '0' ? '否' : (this.applyInfo.studentThesisOpened === '1' ? '是' : '-')
      this.applyInfo.projectFundingTuition = response.data.projectFundingTuition.toString()
      this.applyInfo.cooperateBoth = response.data.cooperateBoth.toString()
      this.changeCooperateBoth(this.applyInfo.cooperateBoth)
      this.applyInfo.projectMngmtId = response.data.projectMngmtId
      this.changeProjectCollegeId(this.applyInfo.projectCollegeId)
      if (this.applyInfo.projectFundingTuition === '1') {
        this.validateProjectTuitionAmount = [{ required: true, message: this.$t('projectApplication.requireProjectTuitionAmount'), trigger: 'blur'},{ validator: this.checkSpecial, trigger: 'blur'}]
      } else {
        this.validateProjectTuitionAmount = [{ validator: this.checkSpecial, trigger: 'blur'}]
      }
      // 判定是否已变更--草稿/驳回
      if ((response.data.applyStatus === 1 || response.data.applyStatus === 5) && response.data.projectRefChanged === 1) {
        this.$confirm(this.$t('externamExchangeBase.projectAlreadyChange'), this.$t('externamExchangeBase.prompt'), {
          confirmButtonText: this.$t('externamExchangeBase.confirm'),
          showCancelButton: false,
          type: 'warning'
        })
      }
    }
  },
  methods: {
    async initOptions() {
      this.options.projectNationCode = []
      this.options.projectSubCategory = []
      this.options.projectCollegeId = []
      this.options.projectOverseasSpecialitie = []
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: [
          "G_GJQU" // 国别/地区
        ]
      };
      await queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            projectNationCode: "G_GJQU" // 国别/地区
          },
          res.data,
          this.options
        );
      });
      // 获取项目子类别
      const projectSubCategoryRes = await externalExchangeApi.getXMZLBOptions({
        "selectFlag": 0,
        "parentId": 2
      })
      if (projectSubCategoryRes.code === 200 && projectSubCategoryRes.data.length > 0) {
        this.options.projectSubCategory = projectSubCategoryRes.data
      }
      // 获取拟留学学校
      const projectCollegeIdRes = await externalExchangeApi.getStudyAbroadCollege({
        "pageNum_": 1,
        "pageSize_": 99999,
        "condition": {
        }
      })
      if (projectCollegeIdRes.code === 200) {
        this.options.projectCollegeId = projectCollegeIdRes.data.list
      }
      // 获取拟留学专业名称（一级学科名称）
      const projectOverseasSpecialitieRes = await externalExchangeApi.getFirseMajors()
      if (projectOverseasSpecialitieRes.code === 200 && projectOverseasSpecialitieRes.data.length > 0) {
        this.options.projectOverseasSpecialitie = projectOverseasSpecialitieRes.data
      }
    },
    // 获取文件fileList
    getFileList(fileArr, number) {
      let fileArray = []
      fileArr.map((value) => {
        if (value.number === number) {
          fileArray.push({
            url: value.fileId,
            name: value.fileName,
            uid: value.fileId
          })
        }
      })
      return fileArray
    },
    // 修改合作科研项目是否
    changeCooperateBoth(val) {
      // 1是0否
      if (val === '1') {
        this.validateCooperateNameArr = [{ required: true, message: this.$t('projectApplication.requireCooperateName'), trigger: 'blur' },{ validator: this.checkSpecial, trigger: 'blur' }]
        this.validateStartTimeArr = [{ required: true, message: this.$t('projectApplication.requireCooperateStartTime'), trigger: 'blur' }]
        this.validateEndTimeArr = [{ required: true, message: this.$t('projectApplication.requireCooperateEndTime'), trigger: 'blur' }]
      } else if (val === '0') {
        this.validateCooperateNameArr = [{ validator: this.checkSpecial, trigger: 'blur' }]
        this.validateStartTimeArr = []
        this.validateEndTimeArr = []
      }
    },
    // 修改拟留学学校
    changeProjectCollegeId(val) {
      if (val) {
        let projectMngmtArray = []
        if (this.options.projectCollegeId.length > 0) {
          projectMngmtArray = this.options.projectCollegeId.filter(value => {
            return value.id === Number(val)
          })
          if (projectMngmtArray[0].collegeNameEn) {
            this.$set(this.applyInfo, 'projectCollegeEn', projectMngmtArray[0].collegeNameEn)
          }
        }
      } else {
        this.$set(this.applyInfo, 'projectCollegeEn', '')
      }
    },
    // 下载学习(研修)计划模板
    downloadStudyAndTrainPlan() {
      externalExchangeApi.templateDownload({
        type: 112,
        fileName: '学习(研修)计划模板.docx'
      })
    },
    // 下载申请人科研成果清单模板
    downloadApplicateResearchResults() {
      externalExchangeApi.templateDownload({
        type: 115,
        fileName: '申请人科研成果清单.docx'
      })
    },
    downloadMaterial(file, fileNumber, key) {
      if (file.url) {
        downloadfile(file.url);
      } else if (file.status === 'success' && file.response.data) {
        downloadfile(file.response.data[file.name].objectkey)
      }
    }
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>
  .project-application-container {
    .el-breadcrumb__item:last-child ::v-deep {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: bold;
        cursor: default
      }
    }
    .el-breadcrumb__item ::v-deep {
      .is-link {
        color: #aaa;
        font-weight: unset;
      }
      .is-link:hover {
        color: #409eff;
      }
    }
    .personal-info-container {
      padding-left: 15px;
    }
    .title {
      font-weight: bold;
      font-size: 18px;
    }
    .privacy-title {
      margin-bottom: 20px;
    }
    .other-title {
      margin-top: 20px;
    }
    .file-container ::v-deep {
      margin-left: 10px!important;
      .el-form-item {
        margin-bottom: 0;
      }
      .el-form-item__label {
        text-align: left!important;
      }
      .upload-demo {
        width: 450px;
        text-align: center;
        line-height: 0;
        .el-upload-list__item:first-child {
          margin-top: 0;
        }
      }
      .file-tip-info {
        flex: 1;
        color: #8896a7;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    .el-divider--horizontal {
      margin: 7px 0!important;
    }
    .sub-container {
      color: #2a394e;
      padding: 0 20px;
      font-size: 16px;
    }
    .sub-container-title {
      margin-bottom: 20px;
      font-size: 16px;
      .collapse-info {
        margin-left: 55px;
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .operate-footer {
      text-align: right;
    }
  }
</style>
